<template>
    <div class="container" style="margin-top: 5vh;">

      <div>
        <PartileViewVue v-model:value="aceEditor.content"></PartileViewVue>
      </div>
      <div>
        <AceEditor
          v-model:value="aceEditor.content"
          @update:value="aceEditor.content = $event"
          :theme="aceEditor.theme"
          :language="aceEditor.lang"
      ></AceEditor>
      </div>
    </div>
</template>

<script>
import AceEditor from "@/views/AceEditor.vue";
import { reactive, ref } from "vue";
import PartileViewVue from "@/components/PartileView.vue";

export default {
  name: "WarlockHome",
  components: {
    AceEditor,
    PartileViewVue
  },
  setup() {
    let current = ref('edit');

    const aceEditor = reactive({
      content: "",
      theme: "textmate",
      language: "text",
    });
    return {
      aceEditor,
      current,
    }
  }
}
</script>

<style scoped>
.ace {
  position: relative !important;
  border: 1px solid lightgray;
  margin: auto;
  height: auto;
  width: 100%;
}
</style>